<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">

        <el-form-item>
          <span>状态：</span>
          <el-radio-group v-model="selectOptions.status" @change="currentChange">
            <el-radio-button v-for="(item, index) in statusMaps" :label="item.value" name="status" :key="index">{{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <span>命令：</span>
          <el-radio-group v-model="selectOptions.cmd" @change="currentChange">
            <el-radio-button v-for="(item, index) in cmdMaps" :label="item.value" name="type" :key="index">{{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <div style="display: inline-block;float: right">
          <el-select v-model="selectOptions.query" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-form-item>
            <el-input :placeholder="selectOptions.query" v-model="selectOptions.keywords" @keyup.enter.native="doSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="doSearch">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="background: #13ce66" v-on:click="_reload">刷新</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="tasks" highlight-current-row v-loading="listLoading"
              style="width: 100%;" element-loading-text="玩命请求中。。。">
      <el-table-column label="ID" prop="id">
      </el-table-column>
      <el-table-column label="期号" prop="sn">
      </el-table-column>
      <el-table-column label="用户信息" width="200">
        <template slot-scope="scope">
          <div class="people">
            <span class="name">{{ scope.row.nickname }}</span>
            <span class="name">{{ scope.row.phone }}</span>
          </div>
          <div class="user-avatar" v-if="scope.row.avatar">
            <a :href="scope.row.avatar" target="_blank"><img :src="scope.row.avatar" alt=""></a>
          </div>
          <div class="user-avatar" v-else>
            <img src="../../../static/images/default.png" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="area_name" label="地块" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.area_name }}{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="plant_name" label="植物" width="120" >
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" :formatter="status">
      </el-table-column>
      <el-table-column prop="type" label="任务" min-width="120" :formatter="task">
      </el-table-column>
      <el-table-column prop="worker_name" label="管家姓名" min-width="100">
      </el-table-column>
      <el-table-column prop="finish_pics" label="完成图片" min-width="160">
        <template slot-scope="scope">
          <div class="contentPic" v-if="scope.row.finish_pics">
              <span class="piclist" v-for="pics in scope.row.finish_pics">
                <a :href="pics" target="_blank"><img :src="pics"></a>
              </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="发出时间" width="180" :formatter="create_time">
      </el-table-column>
      <el-table-column prop="accept_time" label="接单时间" min-width="180" :formatter="accept_time">
      </el-table-column>
      <el-table-column prop="finish_time" label="完成时间" min-width="180" :formatter="finish_time">
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{total}} 条数据</span>
    </el-col>


  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
	import { apiTree } from '../../apiTree'

  export default {
    data() {
      return {
        options: [
          {value: 'sn', label: '期号'},
          {value: 'uid', label: '用户uid'},
          {value: 'phone', label: '手机号'},
          {value: 'worker_name', label: '管家姓名'}
        ],
        statusMaps: [
          {value: -1, label: '全部'},
          {value: 0, label: '等待接单'},
          {value: 1, label: '已接单'},
          {value: 2, label: '已完成'}
        ],
        cmdMaps: [
          {value: -1, label: '全部'},
          {value: 3, label: '锄草'},
          {value: 4, label: '施肥'},
          {value: 5, label: '除虫'},
          {value: 6, label: '浇水'}
        ],
        tasks: [],
        total: 0,
        listLoading: false,
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
          query: this.$route.query.query !== undefined ? this.$route.query.query : '',
          keywords: this.$route.query.keywords !== undefined ? this.$route.query.keywords : '',
          status: this.$route.query.status !== undefined ? this.$route.query.status : -1,
          cmd: this.$route.query.cmd !== undefined ? this.$route.query.cmd : -1
        }
      }
    },
    methods: {
      // 性别显示转换
      formatSex: function (row, column) {
        return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'
      },
      status: function (row, column) {
        if (row.status === '0') {
          return '等待接单'
        } else if (row.status === '1') {
          return '已接单'
        } else if (row.status === '2') {
          return '已完成'
        }
      },
      // 页码选择
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      // 选项卡选择
      currentChange() {
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      doSearch() {
        if (this.selectOptions.query) {
          this.$router.push({path: this.$route.path, query: this.selectOptions})
        }
      },
      create_time(row, column) {
        return util.formatDate.format(new Date(row.create_time * 1000), 'yyyy/MM/dd hh:mm:ss')
      },
      accept_time(row, column) {
        if (row.accept_time === '0' || row.accept_time === null) {
          return '0'
        } else {
          return util.formatDate.format(new Date(row.accept_time * 1000), 'yyyy/MM/dd hh:mm:ss')
        }
      },
      finish_time(row, column) {
        if (row.finish_time === '0' || row.finish_time === null) {
          return '0'
        } else {
          return util.formatDate.format(new Date(row.finish_time * 1000), 'yyyy/MM/dd hh:mm:ss')
        }
      },
      task(row, column) {
        if (row.type === '3') {
          return '锄草'
        } else if (row.type === '4') {
          return '施肥'
        } else if (row.type === '5') {
          return '除虫'
        } else if (row.type === '6') {
          return '浇水'
        }
      },
      _reload() {
        this.gettasks()
      },
      // 获取用户列表
      gettasks() {
        let para = this.$route.query
        if (util.isEmptyObject(para)) {
          this.selectOptions = {
            page: 1,
            query: '',
            keywords: '',
            status: -1,
            cmd: -1
          }
        }
        this.listLoading = true
        // NProgress.start()
        apiTree('daily/index', 'task/userdaytask',para).then((res) => {
          this.total = res.d.total_num
          this.tasks = res.d.data
          this.listLoading = false
          // NProgress.done()
        })
      }
    },
    watch: {
      $route: 'gettasks'
    },
    mounted() {
      this.gettasks()
    }
  }

</script>

<style scoped>
  .piclist {
    display: inline-block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    padding: 10px;
  }
  .cell {
    overflow: hidden;
  }
  .name {
    display: block;
    padding-top: 10px;
  }
  .people {
    float: right;
  }
  .user-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    float: left;
  }
  .user-avatar img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
</style>
